<template>
	<view class="tab-container">
		<view class="content">
			<view class="hand">
				<scroll-view scroll-x="true" class="scroll-class">
					<view class="dataInfo" :style="otherStyle">
						<view class="dataList otherStyle" v-for="(item, index) in tabList" :key="index"
							@click="changeTab(index)">
							<view :class="tabIndex == index ? 'activite' : ''" class="name">
								{{ item.label }}
							</view>
							<view :class="tabIndex == index ? 'active-line' : ''"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "baseTab",
		props: {
			tabList: {
				type: Array,
				default: () => [{
						label: "液压系统"
					},
					{
						label: "电子系统"
					},
					{
						label: "行走系统"
					}
				]
			},
			tabIndex: {
				type: Number,
				default: 0
			},
			otherStyle: {
				type: Object, // 将otherStyle的类型设置为对象
				default: () => ({
					// justifyContent: "space-around" // 设置默认样式属性
				})
			}
		},
		data() {
			return {};
		},
		methods: {
			changeTab(index) {
				this.$emit("changeTab", index);
			}
		}
	};
</script>

<style lang="less" scoped>
	.tab-container {
		position: fixed;
		height: 90rpx;
		width: 100%;
		background-color: #333;
		z-index: 10;

		.content {
			.hand {
				.dataInfo {
					display: flex;
					text-align: center;
					width: 100%;

					.dataList {
						.name {
							font-size: 30rpx;
							color: #fff;
							display: block;
							line-height: 82rpx;
							width: 170rpx;
						}

						.name.activite {
							color: #ffb612;
							font-size: 35rpx;
						}

						.active-line {
							height: 6rpx;
							width: 170rpx;
							background: #ffb612;
							border-radius: 2rpx;
							margin: 0 auto;
						}
					}
				}
			}

			.scroll-class {
				white-space: nowrap;
				// border-bottom: 2rpx solid #e1e4e6;
			}
		}
	}
</style>
